<template>
  <div>
    <view class="mine-wrapper">
      <view class="user_base_info">
        <avatar class='user_avatar' :src="myinfo.avatarUrl" placement='bottom' size='180' :text="myinfo.nickName"
                @lintap="toAlter" />
      </view>
      <view class='user_sign'>{{myinfo.sign}}</view>

      <l-grid class="grid" show-border="true" rowNum="2">
        <l-grid-item key="one" slot="one">
          <text>获赞总数:{{myLikesNum}}</text>
        </l-grid-item>
        <l-grid-item key="two" slot="two">
          <text>征服总数:{{myConquerNum}}</text>
        </l-grid-item>
      </l-grid>

      <view class="border">
      </view>

      <scroll-view scroll-y="true" style="height: 500rpx;" class='scroll'>
        <view>
          <navigator url='/pages/sysMessage/sysMessage'>
            <text>系统消息</text>
          </navigator>
        </view>
        <view>
          <navigator url='/pages/selAllMyQuestions'>
            <text>我的提问</text>
          </navigator>
        </view>
        <view>
          <navigator url='/pages/myAllAnswers'>
            <text>我的回答</text>
          </navigator>
        </view>
        <view>
          <navigator url='/pages/conquerRank'>
            <text>征服榜</text>
          </navigator>
        </view>
      </scroll-view>

      <import src="../template/template.wxml" />
    </view>
  </div>
</template>

<script>
  export default {
    name: 'UserInfo',
    data () {
      return {
        myinfo: {},
        remotePath: '/wx/icon/user/' + wx.getStorageSync('token') + '.png',
        myLikesNum: 0,
        tabbar: {},
        myConquerNum: 0
      }
    },
    methods: {
      getUserInfo () {
        // 调用登录接口
        wx.login({
          success: () => {
            wx.getUserInfo({
              success: (res) => {
                this.myinfo = res.userInfo
              }
            })
          }
        })
      },
      onPullDownRefresh () {
        wx.showToast({
          title: 'loading....',
          icon: 'loading'
        })
      },
      toAlter (e) {
        wx.navigateTo({
          url: '/pages/reMyMessage/reMyMessage'
        })
      }
    },
    onLoad () {
    },
    onShow () {
      this.$root.$mp.page.getTabBar().setData({
        activeIndex: 2 // 对应页面的index
      })

      var that = this
      wx.request({
        url: 'http://47.94.166.187:8080/miniProgram/selAllMyLikes',
        data: {
          token: wx.getStorageSync('token')
        },
        success (res) {
          console.log('---------++++++---------------')
          console.log(res)
          that.myLikesNum = res.data.object
        }
      })

      wx.request({
        url: 'http://47.94.166.187:8080/miniProgram/selUser',
        data: {
          token: wx.getStorageSync('token')
        },
        success (res) {
          console.log('--------- ///// ---------------')
          console.log(res.data)
          that.myinfo = res.data.object
          console.log(that.myinfo)
          wx.request({
            url: 'http://47.94.166.187:8080/miniProgram/conquerRank',
            data: {
              token: wx.getStorageSync('token')
            },
            success (res) {
              console.log('-----------23546-------------')
              console.log(res)
            }
          })
        }
      })
    }
  }
</script>

<style>
  .mine-wrapper {
    padding: 0rpx;
    margin: 0rpx;
  }

  .user_base_info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    font-size: 35rpx;
    padding: 60rpx 0 0 0;
  }

  .user_base_info .user_avatar {
    margin: 0 auto;
  }

  .user_sign {
    width: 750rpx;
    height: 50rpx;
    text-align: center;
    font-size: 30rpx;
    margin-bottom: 10rpx;
  }

  .grid {
    width: 100%;
    font-size: 35rpx;
  }

  .scroll {
    padding: 30rpx 0rpx;
  }

  .scroll view {
    width: 100%;
    margin: 60rpx 0rpx;
    display: flex;
    justify-content: center;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }

  .border {
    margin-top: 15rpx;
    width: 100%;
    height: 50rpx;
    border-top: solid 1rpx #d3d3d3;
  }

</style>
